<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>无人机实时轨迹 - 极简版</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body, html, #allmap { width:100%; height:100%; margin:0; padding:0; overflow:hidden; }
        #info {
            position: absolute; top: 10px; left: 10px; z-index: 1000;
            background: rgba(0,0,0,0.75); color: #fff; padding: 12px 18px;
            border-radius: 8px; font-size: 14px; line-height: 1.8;
            font-family: "Microsoft YaHei", Arial;
        }
    </style>
    <!-- 只用最稳定的百度地图 3.0 普通版（不带 WebGL，不依赖任何插件） -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=F2xRbZ4Pg1yjnC5ZeqSr9W0ntc3MQuuu"></script>
</head>
<body>
<div id="allmap"></div>
<div id="info">正在连接数据源...</div>

<script type="text/javascript">
    // 初始化地图
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(121.497, 31.329), 18);
    map.enableScrollWheelZoom(true);

    var dronePolyline = new BMap.Polyline([], {strokeColor:"#FF3333", strokeWeight:6, strokeOpacity:0.8});
    var pilotPolyline = new BMap.Polyline([], {strokeColor:"#33FF33", strokeWeight:6, strokeOpacity:0.8});
    map.addOverlay(dronePolyline);
    map.addOverlay(pilotPolyline);

    // 无人机标记：红色
    var droneIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
        imageOffset: new BMap.Size(0, 0)  // A
    });
    var droneMarker = new BMap.Marker(new BMap.Point(0, 0), { icon: droneIcon });
    map.addOverlay(droneMarker);

    // 飞手标记：绿色
    var pilotIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
        imageOffset: new BMap.Size(0, -50)  // C
    });
    var pilotMarker = new BMap.Marker(new BMap.Point(0, 0), { icon: pilotIcon, title: "飞手位置" });
    map.addOverlay(pilotMarker);

    // 延迟居中逻辑
    var autoCenter = true;  // 是否自动居中
    var centerTimer = null;

    // 鼠标操作时暂停自动居中
    map.addEventListener("dragstart", () => { autoCenter = false; clearTimeout(centerTimer); });
    map.addEventListener("dragend", () => {
        clearTimeout(centerTimer);
        centerTimer = setTimeout(() => autoCenter = true, 5000); // 5秒后恢复自动居中
    });
    map.addEventListener("zoomstart", () => { autoCenter = false; clearTimeout(centerTimer); });
    map.addEventListener("zoomend", () => {
        clearTimeout(centerTimer);
        centerTimer = setTimeout(() => autoCenter = true, 5000);
    });

    var ws = new WebSocket("ws://" + location.host + "/ws");
    ws.onmessage = function(e) {
        var msg = JSON.parse(e.data);

        var dronePt = new BMap.Point(msg.DroneLon, msg.DroneLat);
        var pilotPt = new BMap.Point(msg.PilotLon, msg.PilotLat);

        // 坐标过滤：0,0 或重复点不加入轨迹
        if (!(dronePt.lng === 0 && dronePt.lat === 0)) {
            var dronePath = dronePolyline.getPath();
            dronePt.lng = dronePt.lng + 0.0115;
            dronePt.lat = dronePt.lat + 0.0035;
            if (dronePath.length === 0 ||
                dronePath[dronePath.length-1].lng !== dronePt.lng ||
                dronePath[dronePath.length-1].lat !== dronePt.lat) {
                dronePath.push(dronePt);
                dronePolyline.setPath(dronePath);
            }
        }

        if (!(pilotPt.lng === 0 && pilotPt.lat === 0)) {
            var pilotPath = pilotPolyline.getPath();
            pilotPt.lng = pilotPt.lng + 0.0115;
            pilotPt.lat = pilotPt.lat + 0.0035;
            if (pilotPath.length === 0 ||
                pilotPath[pilotPath.length-1].lng !== pilotPt.lng ||
                pilotPath[pilotPath.length-1].lat !== pilotPt.lat) {
                pilotPath.push(pilotPt);
                pilotPolyline.setPath(pilotPath);
            }
        }

        // 更新标记位置
        droneMarker.setPosition(dronePt);
        pilotMarker.setPosition(pilotPt);

        // 自动居中（只有在允许自动居中时）
        if (autoCenter) map.panTo(dronePt);

        // 更新信息面板
        document.getElementById("info").innerHTML =
            `<strong>${msg.ModelName || '无人机'}</strong> | ${msg.Serial || ''}<br>` +
            `高度 ${msg.Height.toFixed(1)}m | 距离 ${msg.Distance.toFixed(2)}km<br>` +
            `无人机: ${msg.DroneLon.toFixed(6)}, ${msg.DroneLat.toFixed(6)}<br>` +
            `飞手: ${msg.PilotLon.toFixed(6)}, ${msg.PilotLat.toFixed(6)}<br>` +
            `信号 ${msg.Rssi}dBm | ${msg.Freq.toFixed(1)}MHz`;
    };

    ws.onopen  = () => document.getElementById("info").innerHTML = "已连接，等待无人机数据...";
    ws.onerror = ws.onclose = () => document.getElementById("info").innerHTML = "连接断开，请刷新页面";
</script>
</body>
</html>